<template>
    <el-dialog
               @open="dialogOpen"
               @closed="dialogClose"
               v-model="dialogFormVisible" :title="props.title">

        <el-form :model="dialogForm" ref="dialogFormRef">
            <el-form-item label="上传头像" prop="headimgurl">
                <s-upload v-model="dialogForm.headimgurl"></s-upload>
            </el-form-item>
            <el-form-item label="班级" prop="class" :rules="[{ required: true, message: '请输入班级' }]">
                <el-input v-model="dialogForm.class" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名' }]">
                <el-input v-model="dialogForm.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="年龄" prop="age" :rules="[{ required: true, message: '请输入年龄' }]">
                <el-input v-model="dialogForm.age" autocomplete="off" />
            </el-form-item>
            <el-form-item label="城市" prop="city" :rules="[{ required: true, message: '请输入城市' }]">
                <el-input v-model="dialogForm.city" autocomplete="off" />
            </el-form-item>
            <el-form-item label="学历" prop="degree" :rules="[{ required: true, message: '请输入学历' }]">
                <el-input v-model="dialogForm.degree" autocomplete="off" />
            </el-form-item>
            <el-form-item label="项目地址" prop="productUrl" :rules="[{ required: true, message: '请输入项目地址' }]">
                <el-input v-model="dialogForm.productUrl" autocomplete="off" />
            </el-form-item>
            <el-form-item label="描述" prop="description" :rules="[{ required: true, message: '请输入描述' }]">
                <el-input v-model="dialogForm.description" autocomplete="off" />
            </el-form-item>



        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="ok">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { reactive, ref, watch, watchEffect } from 'vue'





import sUpload from "./sUpload.vue"
import { ElMessage } from 'element-plus';




let props = defineProps({
    
    title: {
        type: String,
        default: '增加学员信息'
    },
    
    action: {
        type: String,
        default: 'add'
    },
    
    modelValue: {
        type: Boolean,
        default: false
    },
    
    reviewData: {
        type: Object
    }
})



let emit = defineEmits(['ok', 'cancel', 'update:modelValue'])


const dialogFormVisible = ref(false)



watch(() => props.modelValue, (newVal) => {
    
    
    
    if (newVal !== dialogFormVisible.value) {
        dialogFormVisible.value = newVal
    }
})














let sId = ref()

const dialogForm = reactive({
    class: "",
    name: "",
    age: "",
    city: "",
    degree: "",
    productUrl: "",
    description: "",
    headimgurl: ""
})




let dialogOpen = () => {
    
    if (props.action === 'edit') {
        console.log('123213123123123')
        
        
        sId.value = props.reviewData.sId;

        
        let keys = Object.keys(props.reviewData)

        let newKeys = keys.filter(key => (key !== 'sId' && key !== '_id'))

        newKeys.forEach(key => {
            dialogForm[key] = props.reviewData[key]
        })
    } else if (props.action === 'add') {
        
      

    }
}



let dialogClose = () => {  
    dialogFormRef.value.resetFields()   
    dialogFormVisible.value = false
    emit('update:modelValue', dialogFormVisible.value)
}

watchEffect(() => {
    console.log(dialogForm.headimgurl)
})




let dialogFormRef = ref()



let cancel = () => {
    dialogFormVisible.value = false
    emit('cancel')

}

let ok = () => {
    
    dialogFormRef.value.validate(valid => {
        if (valid) {
            let newFormData = {};
            
            if (props.action === 'edit') {
                
                newFormData = {
                    sId: sId.value,
                    ...dialogForm
                }
            } else if (props.action === 'add') {
                
                newFormData = { ...dialogForm }
            }
            dialogFormVisible.value = false
            
            emit('ok', newFormData)
        } else {
            ElMessage.error('选项填写不完整,带※号的都需要填写完整')
        }
    })
    

}



</script>